<template>
  <div ref="chart" class="col"></div>
</template>

<script>
import echarts from 'echarts';

export default {
  components: {},
  props: {
  },
  data() {
    return {
      chart: null,
      theme: 'light',
    };
  },
  watch: {},
  computed: {},
  methods: {
    renderChart() {
      if (!this.chart && this.$refs.chart) {
        this.chart = echarts.init(this.$refs.chart, this.theme);
      }
      const option = this.getOptions();
      this.chart.clear();
      this.chart.setOption(option);
      setTimeout(() => {
        this.chart.resize();
      }, 100);
    },
    getOptions() {
      return {
        parallelAxis: [
          { dim: 0, name: '价格' },
          { dim: 1, name: '服务水平' },
          { dim: 2, name: '质量' },
          {
            dim: 3,
            name: '评分',
            type: 'category',
            data: ['卓越', '优秀', '一般', '差'],
          },
        ],
        series: {
          type: 'parallel',
          lineStyle: {
            width: 4,
          },
          data: [
            [12.99, 100, 82, '优秀'],
            [9.99, 80, 77, '一般'],
            [20, 120, 60, '卓越'],
          ],
        },
      };
    },
  },
  created() { },
  mounted() {
    this.renderChart();
  },
};
</script>
<style lang="stylus"></style>
